<template>

  <div class="box">
    <div style="color:aliceblue" class="box-left">
      <div class="leftContainer">
        <div class="box1">
          <div>较上日+{{ store.chinaAdd.localConfirmH5 }}</div>
          <div>{{ store.ChinaTotal.localConfirm }}</div>
          <div>本土现有确诊</div>
        </div>
        <div class="box1">
          <div>较上日+{{ store.chinaAdd.nowConfirm }}</div>
          <div>{{ store.ChinaTotal.nowConfirm }}</div>
          <div>现有确诊</div>
        </div>
        <div class="box1">
          <div>较上日+{{ store.chinaAdd.confirm }}</div>
          <div>{{ store.ChinaTotal.confirm }}</div>
          <div>累计确诊</div>
        </div>
        <div class="box1">
          <div>较上日+{{ store.chinaAdd.noInfect }}</div>
          <div>{{ store.ChinaTotal.noInfect }}</div>
          <div>无症状感染者</div>
        </div>
        <div class="box1">
          <div>较上日+{{ store.chinaAdd.importedCase }}</div>
          <div>{{ store.ChinaTotal.importedCase }}</div>
          <div>境外输入</div>
        </div>
        <div class="box1">
          <div>较上日+{{ store.chinaAdd.dead }}</div>
          <div>{{ store.ChinaTotal.dead }}</div>
          <div>累计死亡</div>
        </div>
      </div>

      <div class="leftPie" id="china-pie">
      </div>

      <div class="leftCategory">
      </div>
    </div>

    <div id="china-map" class="box-center">
    </div>
    <div style="color:aliceblue" class="box-right">
      <table class="table" cellpadding="0" border="1">
        <thead>
          <tr>
            <th>地区</th>
            <th>新增确诊</th>
            <th>累计确诊</th>
            <th>治愈</th>
            <th>死亡</th>
          </tr>
        </thead>
        <transition-group tag="tbody" enter-active-class="animate__animated animate__flipInY">
          <tr v-for="(item, index) in store.item" :key="item.name + index">
            <td align="center">{{ item.name }}</td>
            <td align="center">{{ item.today.confirm }}</td>
            <td align="center">{{ item.total.confirm }}</td>
            <td align="center">{{ item.total.heal }}</td>
            <td align="center">{{ item.total.dead }}</td>
          </tr>
        </transition-group>
      </table>
    </div>
  </div>

</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { useCounterStore } from '../src/stores/counter'
import * as echarts from 'echarts'
import './assets/china.js'
import { geoCoordMap } from './assets/getMap'
import 'animate.css'

const store = useCounterStore()

onMounted(async () => {
  await store.getList()
  initCharts()
  initPie()
  leftCategory()
})

// 地图数据
const initCharts = () => {
  const city = store.list.diseaseh5Shelf.areaTree[0].children
  // console.log(city)
  store.item = city[27].children//默认值
  const data = city.map((item) => {
    // console.log(item.name, geoCoordMap[item.name].concat(item.total.nowConfirm))
    return {
      name: item.name,
      value: geoCoordMap[item.name].concat(item.total.nowConfirm),
      children: item.children
    }
  })
  // 地图图表数据
  const charts = echarts.init(document.querySelector('#china-map') as HTMLElement)
  // var data = [
  //   {
  //     name: "内蒙古",
  //     value: [110.3467, 41.4899]
  //   },
  // ];
  var option = {
    // backgroundColor: "black",
    geo: {
      map: "china",
      aspectScale: 0.8,
      layoutCenter: ["50%", "50%"],
      layoutSize: "120%",
      itemStyle: {
        // normal: {
        areaColor: {
          type: "linear-gradient",
          x: 0,
          y: 1200,
          x2: 1000,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#152E6E", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#0673AD", // 50% 处的颜色
            },
          ],
          global: true, // 缺省为 false
        },
        shadowColor: "#0f5d9d",
        shadowOffsetX: 0,
        shadowOffsetY: 15,
        opacity: 0.5,
        // },

      },
      emphasis: {
        areaColor: "#0f5d9d",
      },

      regions: [
        {
          name: "南海诸岛",
          itemStyle: {
            areaColor: "rgba(0, 10, 52, 1)",
            borderColor: "rgba(0, 10, 52, 1)",
            // normal: {
            opacity: 0,
            label: {
              show: false,
              color: "#009cc9",
            },
            // },
          },
          label: {
            show: false,
            color: "#FFFFFF",
            fontSize: 12,
          },
        },
      ],
    },
    series: [
      {
        type: "map",
        // selectedMode: "multiple",
        map: "china",
        aspectScale: 0.8,
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: "120%",
        zoom: 1, //当前视角的缩放比例
        // roam: true, //是否开启平游或缩放
        scaleLimit: {
          //滚轮缩放的极限控制
          min: 1,
          max: 2,
        },
        label: {
          show: true,
          color: "#FFFFFF",
          fontSize: 12,
        },
        itemStyle: {
          //normal: {
          areaColor: "#0c3653",
          borderColor: "#1cccff",
          borderWidth: 1.8,
          //},

        },
        emphasis: {
          areaColor: "#56b1da",
          label: {
            show: true,
            color: "#fff",
          },
        },
        data: data,
      },
      {

        type: 'scatter',
        coordinateSystem: 'geo',
        //   symbol: 'image://http://ssq168.shupf.cn/data/biaoji.png',
        // symbolSize: [30,120],
        // symbolOffset:[0, '-40%'] ,
        symbol: 'pin',
        symbolSize: [45, 45],
        label: {
          show: true,
          color: "#FFFFFF",
          formatter(obj: any) {
            // console.log(obj.data.value[2])

            return obj.data.value[2]
          }
        },
        itemStyle: {
          // normal: {
          color: '#1cccff', //标志颜色
          // }
        },
        data: data,

      },
    ],
  };

  charts.setOption(option)
  charts.on('click', (e: any) => {
    console.log(e)
    store.item = e.data.children
    console.log(store.item);
  })
}

// pie数据
const initPie = () => {
  // console.log(store.cictyDetail)

  const charts = echarts.init(document.querySelector('#china-pie') as HTMLElement)
  charts.setOption({
    backgroundColor: '#223651',
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '今日新增',
        type: 'pie',
        radius: ['40%', '70%'],
        // avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          // position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '15',
            fontWeight: 'bold'
          }
        },
        // labelLine: {
        //   show: false
        // },
        data: store.cictyDetail.map((item) => {
          return {
            value: item.local_confirm_add,
            name: item.city
          }
        })
      }
    ]
  })
}

// leftCategory
const leftCategory = () => {
  const charts = echarts.init(document.querySelector('.leftCategory') as HTMLElement)
  charts.setOption({
    backgroundColor: '#223651',
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: store.cictyDetail.map(item => item.city),
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    label: {
      show: true
    },
    series: [
      {
        data: store.cictyDetail.map(item => item.local_confirm_add),
        type: 'line',
        smooth: true
      }
    ]
  })
}
</script>
<style lang="less" scoped>
@itemColor: #41b0db;
@itemBg: #223651;
@itemBorder: #212028;

.box {
  height: 100%;
  display: flex;
  overflow: hidden;

  &-left {
    height: 100%;
    width: 500px;

    .leftPie {
      height: 350px;
      width: 100%;
      margin-top: 20px;
      // background-color: aliceblue;
    }

    .leftCategory {
      height: 350px;
      width: 100%;
      margin-top: 20px;
    }

    .leftContainer {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      margin-left: 20px;

      .box1 {
        width: 150px;
        height: 100px;
        padding-top: 10px;
        text-align: center;
        // display: flex;
        // flex-direction: column;
        border: 1px solid black;
        background: @itemBg;

        div:nth-child(2) {
          color: @itemColor;
          padding: 10px 0px;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }

  }

  &-center {
    height: 100%;
    flex: 1;
  }

  &-right {
    height: 100%;
    width: 440px;

    .table {
      width: 420px;
      margin: 20px 20px 0px 0px;
      background: #212028;

      tr {
        th {
          padding: 5px;
          white-space: nowrap; //禁止文件自动换行
        }

        td {
          padding: 5px 10px;
          width: 100px;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>